<script setup>
import {ref} from 'vue'

//输入值
const inputValue = ref('')

//定义发射事件
const emit = defineEmits(['emit'])
const handleEmit = () => {
  if (!inputValue.value?.length) return
  emit('emit', inputValue.value)

  //重置输入框
  inputValue.value = ''
}
</script>

<template>
  <secondary-tab-bar hide-border>
    <input class="service-input" ref="inputRef" v-model="inputValue" @confirm="handleEmit" type="text"
           placeholder="请输入您的答复"/>
    <button class="btn-middle" @click="handleEmit">发送</button>
  </secondary-tab-bar>
</template>

<style lang="scss" scoped>
.secondary-tab-bar {
  grid-template-columns: 1fr auto;
  gap: $spacing-2;
}

.service-input {
  background: $light-bg;
  height: 100%;
  padding: 0 $spacing-3;
  border-radius: $border-radius-max;
}

.btn-middle {
  background: $black;
  color: $white;
}
</style>
